<template>
	<view class="index">
		<view style="background: #fff;">
			<NavBar :title="agreementData.agreementTitle"></NavBar>
		</view>
		<view class="details">
			<view class="detailsBox">
				<view class="companyProfile">
				<rich-text :nodes="agreementData.agreementContent"></rich-text>
				</view>
				<!-- <view v-for="(item,index) in detailsList" :key="index" class="detailsList">
					<text>{{item}}</text>
					<image src="@/static/img/chevron-down.png" mode="widthFix"></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import NavBar from '@/components/navBar.vue'
	import { onShow, onLoad, } from '@dcloudio/uni-app'
	import { getAgreementById } from '@/utils/api/index.ts'
	const agreementId=ref('')
	const agreementData=ref({})
	
	function loadAgreementById(){
		
		getAgreementById({data:{id:agreementId.value}}).then(res=>{
			agreementData.value=res.data
		})
		
	}
	
	const detailsList = ref<string[]>([
		'一、我们如何手机和使用您的个人信息',
		'二、数据使用过程中涉及的合作方',
		'三、您如何管理您的个人信息',
		'四、我们对未成年人的保护',
		'五、联系我们',
	])

	const t0PrivacyPolicy = () : void => {
		uni.navigateTo({
			url: '/pages/my/privacyPolicy'
		})
	}
	
	
	onLoad((option)=>{
		agreementId.value=option.agreementId
		loadAgreementById()
	})
	
	
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
		background-color: #f4f6fa;
		display: flex;
		flex-direction: column;

		.details {
			padding: 24rpx;
			flex: 1;
			overflow: auto;
			.detailsBox {
				background-color: #fff;
				padding: 32rpx 24rpx 32rpx;
				border-radius: 24rpx;

				.companyProfile {
					font-size: 28rpx;
					letter-spacing: 1rpx;
					color: #262626;

					.privacyPolicy {
						color: #1188ff;
					}
				}

				.detailsList {
					height: 74rpx;
					padding: 16rpx;
					background: #F4F6FA;
					border-radius: 16rpx;
					font-size: 28rpx;
					color: #262626;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 24rpx;
					font-weight: bold;

					image {
						width: 36rpx;
					}
				}
			}
		}
	}
</style>